import styles from './index.less';
import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Button, Checkbox, DatePicker, Select, Table, Tag, Space, Pagination } from 'antd';
import { useDispatch, useSelector } from 'umi';
import { orderFormModelState } from '@/models/orderForm';

const { RangePicker }: any = DatePicker;

const { Option } = Select;

const orderForm = () => {
    // 调用models接口
    const { orderForomList, order } = useSelector((state: { orderForm: orderFormModelState }) => state.orderForm);
    console.log(orderForomList, '-----订单页面数据');

    // input数据
    const inp: any = useRef(null)
    const [currents, setcurrents]: any = useState({ current: 1, size: 10 })

    const [form] = Form.useForm();
    const dispatch = useDispatch();
    const onFinish = (values: any) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    // const rangeConfig = {
    //     rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
    // };

    // 请求数据
    useEffect(() => {
        dispatch({
            type: 'orderForm/orderList',
            payload: {
                size: 10,
                current: 4
            }
        })
    }, []);

    return (
        <div className={styles.orderContent}>
            <div className={styles.card}>
                <div className={styles.From}>
                    <Form
                        layout={"inline"}
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            name="username"
                            style={{ width: 240 }}
                        >
                            <Input placeholder="订单编号" style={{ width: '200px', height: "40px" }} ref={inp} />
                        </Form.Item>

                        <Form.Item name="range-picker" style={{ width: 340 }}
                        // {...rangeConfig}
                        >
                            <RangePicker style={{ width: '300px', height: "40px" }} />
                        </Form.Item>
                        <Form.Item name='Select' >
                            <Select placeholder="请选择订单状态" style={{ width: '180px', height: '40px', marginTop: '5px' }} >
                                <Select.Option value="demo">代付款</Select.Option>
                                <Select.Option value="demo">代发货</Select.Option>
                                <Select.Option value="demo">待收货</Select.Option>
                                <Select.Option value="demo">待评价</Select.Option>
                                <Select.Option value="demo">成功</Select.Option>
                                <Select.Option value="demo">失败</Select.Option>
                            </Select>
                        </Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginRight: '14px', marginTop: '5px' }}
                            onClick={() => {
                                const inpdata = inp.current.input.value
                                dispatch({
                                    type: 'orderForm/orderList',
                                    payload: {
                                        current: setcurrents.current,
                                        size: setcurrents.size,
                                        orderNumber: inpdata
                                    }
                                })
                            }}
                        >
                            查询
                            </Button>
                            &nbsp;
                            <Button type="primary" htmlType="submit" style={{ marginRight: '14px', marginTop: '5px' }}>
                            导出发货的订单
                            </Button>
                            &nbsp;
                            <Button type="primary" htmlType="submit" style={{ marginRight: '14px', marginTop: '5px' }}>
                            导出销售记录
                            </Button>
                            &nbsp;
                            {/* 清空input里面的值 */}
                        <Button htmlType="button" onClick={() => {
                            form.resetFields()
                        }} style={{ marginRight: '14px', marginTop: '5px' }}>
                            清空
                         </Button>
                    </Form>
                </div>
            </div>

            <div className={styles.content}>
                {/* <Table columns={columns} dataSource={orderForomList} /> */}
                {/* 表格头部 */}
                <div className={styles.contentTop}>
                    <p className={styles.contentFirst}><span>商品</span><span>成交单价/购买数量</span></p>
                    <p>实付金额</p>
                    <p>支付方式</p>
                    <p>订单状态</p>
                    <p>操作</p>
                </div>

                {/* 订单部分 */}
                <div>
                    {
                        orderForomList.map((item: any) => {
                            return <div className={styles.prod} key={item.orderId}>
                                <div className={styles.prodTit}>
                                    <p className={styles.prodTitFirst}><span>订单编号：{item.orderNumber}</span></p>
                                    <p><span>下单时间：{item.createTime}</span></p>
                                </div>
                                <div className={styles.prodContent}>
                                    <div className={styles.prodContentFirst}>
                                        <div>
                                            <img src={item.orderItems[0].pic} alt="" />
                                        </div>
                                        <div>{item.orderItems[0].prodName}</div>
                                        <div>
                                            <p>￥{item.orderItems[0].price}</p>
                                            <p>X{item.orderItems[0].prodCount}</p>
                                        </div>
                                    </div>
                                    <div className={styles.prodFour}>
                                        <p style={{ color: 'red' }}>￥{item.orderItems[0].price}</p>
                                        <p>共{item.orderItems[0].prodCount}件</p>
                                    </div>
                                    <div className={styles.prodCenter}>手工代付</div>
                                    <div className={styles.prodCenter}>失败</div>
                                    <div className={styles.prodCenter}><a href="">修改</a></div>
                                </div>
                                <div className={styles.remark}>
                                    <p>备注:</p>
                                </div>
                            </div>
                        })
                    }
                </div>
                {/* 分页 */}
                <div className={styles.orderPagination}>
                    <Pagination
                        total={order.total}
                        showSizeChanger
                        showQuickJumper
                        onChange={(page, pageSize) => {
                            setcurrents({ current: page, size: pageSize })
                            dispatch({
                                type: 'orderForm/orderList',
                                payload: {
                                    size: pageSize,
                                    current: page
                                }
                            })
                        }}
                        showTotal={total => `共 ${order.total} 条`}
                    />
                </div>
            </div>

        </div>
    )
}

export default orderForm;

